<template>
    <div id="main">
        <Header title="喵喵电影"/>
            <div id="content">
                <div class="movie_menu">
                    <router-link tag="div" to="/movie/City" class="city_name">
                        <span>{{$store.state.city.nm}}</span>
                        <i class="iconfont icon-lower-triangle"></i>
                    </router-link>
                    <div class="hot_swtich">
                        <router-link tag="div" to="/movie/NowPlaying" class="hot_item">正在热映</router-link>
                        <router-link tag="div" to="/movie/ComingSoon" class="hot_item">即将上映</router-link>
                    </div>
                    <router-link tag="div" to="/movie/Search" class="search_entry">
                        <i class="iconfont icon-sousuo"></i>
                    </router-link>
                </div>
                <keep-alive>
                    <router-view />
                </keep-alive>
            </div>
        <TabBar />
        <router-view name="detail"/>
    </div>
</template>

<script>
import Header from '@/components/Header';
import TabBar from '@/components/TabBar';

export default {
    name:'Movie',
    components:{
        Header,
        TabBar
    }
}
</script>

<style scope lang="scss">
#content{
    position: relative;
    display: flex;
    overflow: auto;
    flex-direction: column;
    flex: 1;
    margin-bottom: 50px;
    .movie_menu{
        width: 100%;
        height: 45px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e6e6e6;
        align-items: center;
        background: white;
        z-index: 10;
        .city_name{
            height: 100%;
            line-height: 45px;
            margin-left: 20px;
        }
        .router-link-active{
            color: #ef4238 !important;
            border-bottom: 2px #ef4238 solid;
        }
        .hot_swtich{
            display: flex;
            height: 100%;
            line-height: 45px;
            .hot_item{
                font-size: 15px;
                color: #666;
                width: 80px;
                text-align: center;
                margin: 0 12px;
                font-weight: 700;
            }
        }
        .search_entry{
            height: 100%;
            line-height: 45px;
            margin-right: 20px;
            i{
                font-size: 24px;
                color:red
            }
        }
    }
}
</style>